<style></style>
<template>
  <div>
    <div class="i-layout-page-header">
      <i-page-header title="新闻分类"></i-page-header>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="是否显示：" label-for="is_show">
              <Select
                v-model="formValidate.is_show"
                placeholder="请选择"
                clearable
                @on-change="getSearch"
              >
                <Option value="1">显示</Option>
                <Option value="0">不显示</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="分类名称：" label-for="title">
              <Input
                search
                enter-button
                placeholder="请输入分类名称"
                v-model="formValidate.title"
                @on-search="getSearch"
              />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <Button type="primary" icon="md-add" @click="cateAdd" class="mr20"
              >添加分类</Button
            >
          </Col>
        </Row>
      </Form>
      <vxe-table
        :border="false"
        class="vxeTable mt25"
        highlight-hover-row
        highlight-current-row
        :loading="loading"
        ref="xTable"
        header-row-class-name="false"
        :tree-config="{ children: 'children', expandAll: true }"
        :data="cateData"
      >
        <vxe-table-column
          field="id"
          title="ID"
          tooltip
          min-width="20"
        ></vxe-table-column>
        <vxe-table-column
          field="title"
          tree-node
          title="分类名称"
          min-width="150"
        ></vxe-table-column>
        <!-- <vxe-table-column field="icon" title="图标"  min-width="80">
          <template v-slot="{ row }">
              <Icon custom="i-icon" :custom="'ivu-icon-' + row.icon"  size="24"></Icon>
          </template>
        </vxe-table-column> -->
        <vxe-table-column
          field="seq"
          title="排序"
          min-width="150"
        ></vxe-table-column>
        <vxe-table-column field="is_show" title="状态" min-width="50">
          <template v-slot="{ row }">
            <i-switch
              v-model="row.is_show"
              :value="row.is_show"
              :true-value="1"
              :false-value="0"
              @on-change="onChangeIsShow(row)"
              size="large"
            >
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="action"
          title="操作"
          min-width="150"
          fixed="right"
        >
          <template v-slot="{ row, index }">
            <a @click="cateEdit(row)">编辑</a>
            <Divider type="vertical" />
            <a @click="cateDel(row, '删除分类', index)">删除</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>
    <Modal
      v-model="newsCateBoxShow"
      :title="newsCateBoxTitle"
      @on-cancel="newsCateBoxClose"
    >
      <el-form ref="cate" :model="cate" label-width="80px">
        <el-form-item
          label="分类名称"
          prop="title"
          :rules="[{ required: true, message: '请输入分类名称' }]"
        >
          <el-input
            placeholder="请输入分类名称"
            autocomplete="off"
            v-model="cate.title"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="分类code"
          prop="code"
          :rules="[{ required: true, message: '请输入分类code' }]"
        >
          <el-input placeholder="请输入分类code" v-model="cate.code"></el-input>
        </el-form-item>

        <el-form-item label="归属分类">
          <el-select
            v-model="cate.pid"
            placeholder="归属分类"
            style="width: 100%"
          >
            <el-option
              :label="item.html + item.title"
              :value="item.id"
              :key="item.id"
              v-for="item in cateAr"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-input placeholder="排序越高越前面" v-model="cate.seq"></el-input>
        </el-form-item>

        <el-form-item label="是否禁用" style="margin-bottom: 0">
          <el-radio-group v-model="cate.is_show">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="newsCateBoxShow = false">取 消</el-button>
        <el-button type="primary" @click="formSub">确 定</el-button>
      </span>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import IPageHeader from '../../../layouts/system/page-header/index'
import {
  SystemNewsCate,
  SystemNewsCateTree,
  SystemNewsCateSave,
  SystemNewsCateItem,
  SystemNewsCateDel,
  SystemNewsCateShowSet,
} from '../../../api/system/news'
import Setting from '../../../setting'
export default {
  name: 'news_cate',
  components: {
    IPageHeader,
  },
  data() {
    return {
      // 新
      loading: false,
      cateData: [],
      // 搜索区域
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      formValidate: {
        is_show: '',
        page: 1,
        limit: 100,
        title: '',
      },
      // 弹窗区域
      newsCateBoxTitle: '添加分类',
      newsCateBoxShow: false,
      cate: {
        id: 0,
        title: '',
        pid: 0,
        is_show: 0,
        code: '',
        seq: 0,
      },
      cateAr: [],
    }
  },
  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      this.getCate()
    },
    // 商品分类；
    getCate() {
      this.loading = true
      this.formValidate.is_show = this.formValidate.is_show || ''
      SystemNewsCate(this.formValidate)
        .then((res) => {
          if (res.code == 200) {
            this.cateData = res.data
            this.loading = false
          } else {
            this.loading = false
            this.$alert(res.msg)
          }
        })
        .catch((res) => {
          console.log(res)
          this.loading = false
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 表格搜索
    getSearch() {
      this.getCate()
    },
    // 修改是否显示
    onChangeIsShow(row) {
      let data = {
        id: row.id,
        is_show: row.is_show,
      }
      SystemNewsCateShowSet(data)
        .then(async (res) => {
          this.$Message.success(res.msg)
        })
        .catch((res) => {
          this.$Message.error(res.msg)
        })
    },
    // 添加配置分类
    cateAdd() {
      let loading = this.$loading('加载中...')
      SystemNewsCateTree()
        .then((res) => {
          loading.close()
          this.$refs['cate'].resetFields()
          this.cate = this.$utils.resetFields(this.cate, { is_show: 1 })
          this.title = '添加分类'
          this.cateAr = [{ id: 0, title: '顶级栏目', html: '' }].concat(
            res.data
          )
          this.newsCateBoxShow = true
        })
        .catch((err) => {
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 修改数据
     */
    formSub: function () {
      this.$refs['cate'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          SystemNewsCateSave(this.cate)
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.newsCateBoxShow = false
                this.$Message.success('操作成功')
                this.getCate()
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
    /**
     * 关闭
     */
    newsCateBoxClose: function () {
      this.newsCateBoxShow = false
    },

    // 编辑
    cateEdit(row) {
      console.log(row)
      let loading = this.$loading('加载中...')
      var promiseAll = []
      promiseAll.push(SystemNewsCateTree())
      promiseAll.push(SystemNewsCateItem({ id: row.id }))
      Promise.all(promiseAll)
        .then((res) => {
          loading.close()
          this.$refs['cate'].resetFields()
          this.cateAr = [{ id: 0, title: '顶级分类', html: '' }].concat(
            res[0].data
          )
          if (res[1].code == 200) {
            this.title = '修改分类'
            this.cate = res[1].data
            this.newsCateBoxShow = true
          } else {
            this.$alert(res.msg, '系统提示')
          }
        })
        .catch((res) => {
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    // 删除
    cateDel(row, tit, num) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemNewsCateDel({ id: row.id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getCate()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            console.log(err)
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
  },
}
</script>
